import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { ArtistRight } from "./style";
import { getSizeImage } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";
import { getArtistSimiAction } from "../store/actionTypes";

export default memo(function ArtistRightd(props) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getArtistSimiAction(props.id));
  }, [dispatch, props.id]);

  const { artistSimiInfo } = useSelector(
    (state) => ({
      artistSimiInfo: state.getIn(["artistPage", "actistSimiInfo"]),
    }),
    shallowEqual
  );

  return (
    <ArtistRight>
      <div>
        <p className="simi-song">相似歌手</p>
        <div className="simi-img-box">
          <ul>
            {artistSimiInfo.code === 200
              ? artistSimiInfo.artists.map((item, index) => {
                  return (
                    <li key={item.id}>
                      <NavLink
                        to={{
                          pathname: "/artist",
                          search: "?id=" + item.id,
                        }}
                      >
                        <img src={getSizeImage(item.picUrl, 50)} alt="" />
                      </NavLink>
                      <NavLink
                        to={{
                          pathname: "/artist",
                          search: "?id=" + item.id,
                        }}
                      >
                        <p>{item.name}</p>
                      </NavLink>
                    </li>
                  );
                })
              : ""}
          </ul>
        </div>
      </div>
    </ArtistRight>
  );
});
